<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/favicon.ico}"/>
    <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/common.css}">
    <link rel="stylesheet" th:href="@{/css/animate.min.css}">
    <link rel="stylesheet" th:href="@{/iconfont/iconfont.css}">
</head>

<body>

    <div class="page-loading">
        <div class="rubik-loader"></div>
    </div>

    <div class="z-body animated fadeIn">
        <form class="layui-form zadmin-search-area input">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label for="username" class="layui-form-label">用户名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="username" autocomplete="off"
                               id="username" class="layui-input">
                    </div>

                    <label for="email" class="layui-form-label">邮箱</label>
                    <div class="layui-input-inline">
                        <input type="text" name="email" autocomplete="off"
                               id="email" class="layui-input">
                    </div>

                    <label for="deptTree" class="layui-form-label">部门</label>
                    <div class="layui-input-inline">
                        <ul id="deptTree" class="dtree" data-id="0" data-value="请选择"></ul>
                        <input type="hidden" id="deptId" name="deptId">
                    </div>

                    <label for="status" class="layui-form-label">状态</label>
                    <div class="layui-input-inline">
                        <select name="status" id="status">
                            <option value="">请选择</option>
                            <option value="1">正常</option>
                            <option value="0">锁定</option>
                        </select>
                    </div>

                    <button lay-submit="" lay-filter="search" class="layui-btn layui-btn-sm layui-btn-primary table-action">
                        <i class="zadmin-icon zadmin-icon-search"></i>
                    </button>
                </div>
            </div>
        </form>

        <table class="layui-hide" id="user-table"></table>
    </div>

    <script type="text/html" id="toolbar">
        <shiro:hasPermission name="user:add">
            <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="add" >
                <i class="zadmin-icon zadmin-icon-xinzeng zadmin-oper-area"></i>
                新增
            </button>
        </shiro:hasPermission>
    </script>

    <script type="text/html" id="column-toolbar">
        <shiro:hasPermission name="user:update">
            <a lay-event="edit">
                <i class="zadmin-icon zadmin-icon-edit-square zadmin-oper-area zadmin-blue" title="编辑"></i>
            </a>
        </shiro:hasPermission>
        <shiro:hasPermission name="user:delete">
            <a lay-event="del">
                <i class="zadmin-icon zadmin-icon-delete zadmin-oper-area zadmin-red" title="删除"></i>
            </a>
        </shiro:hasPermission>

        <shiro:lacksPermission  name="user:update,user:delete">
            <i class="zadmin-icon zadmin-icon-wuquanxian zadmin-oper-area zadmin-red"></i>无权限
        </shiro:lacksPermission>
    </script>


    <script type="text/html" id="statusTpl">
        <!-- 不能禁用自己 -->
        {{#  if('<shiro:principal property="username"/>' == d.username) { }}
            <input type="checkbox" disabled name="status" value="{{d.userId}}" lay-skin="switch" lay-text="正常|锁定" lay-filter="status" {{ d.status == '1' ? 'checked' : '' }}>
        {{#  } }}

        {{#  if('<shiro:principal property="username"/>' !== d.username) { }}
            <input type="checkbox" name="status" value="{{d.userId}}" lay-skin="switch" lay-text="正常|锁定" lay-filter="status" {{ d.status == '1' ? 'checked' : '' }}>
        {{#  } }}
    </script>

    <script th:src="@{/lib/jquery/jquery.min.js}"></script>
    <script th:src="@{/lib/layui/layui.js}"></script>
    <script th:src="@{/js/common.js}"></script>

    <script>
        layui.config({
            base: '/lib/layui/extend/'
        }).use(['table', 'element', 'form', 'dtree', 'tablePlug'], function () {
            var table = layui.table;
            var $ = layui.$;
            var form = layui.form;
            var dtree = layui.dtree;
            var tablePlug = layui.tablePlug;

            tablePlug.smartReload.enable(true);

            dtree.renderSelect({
                elem: "#deptTree",
                url: "/dept/tree",
                dataStyle: "layuiStyle",
                width: "100%",
                method: "GET",
                dot: false,
                menubar: true,
                response: {
                    statusCode: 0,
                    message: "msg",
                    treeId: "id",
                    parentId: "parentId",
                    title: "name"
                }
            });

            dtree.on("node('deptTree')" ,function(obj) {
                var typeDom = layui.$('#deptId');
                console.log(typeDom.val() , obj.param.nodeId);
                console.log(typeDom.val() === obj.param.nodeId);
                if (typeDom.val() === obj.param.nodeId) {
                    typeDom.val('');
                    layui.$("input[dtree-id='deptTree']").val('请选择');
                } else {
                    typeDom.val(obj.param.nodeId)
                }
            });

            table.render({
                elem: '#user-table'
                , url: '/user/list'
                , page: true
                , toolbar: '#toolbar'
                , smartReloadModel: true
                , cols: [
                    [
                        {type: 'numbers', title: '序号', width: "5%"}
                        ,{field: 'userId', title: 'ID', width: "10%", hide: true}
                        , {field: 'username', title: '用户名', width: "15%"}
                        , {field: 'deptName', title: '部门', width: "12%"}
                        , {field: 'email', title: '邮箱', width: "12%"}
                        , {field: 'createTime', title: '创建时间', width: "12%"}
                        , {field: 'lastLoginTime', title: '最后登陆时间', width: "12%"}
                        , {field: 'status', title: '状态', templet: "#statusTpl", width: "12%"}
                        , {title: '操作', fixed: 'right', align: 'center', toolbar: '#column-toolbar'}
                    ]
                ]
            });

            // 账号状态(正常/锁定)点击事件
            form.on('switch(status)', function(data){
                if (data.elem.checked) {
                    $.post('/user/' + data.value + '/enable', function (data) {
                        handlerResult(data, enableDone);
                    });
                } else {
                    $.post('/user/' + data.value +'/disable', function (data) {
                        handlerResult(data, disableDone);
                    });
                }
            });

            // 工具条点击事件
            table.on('toolbar', function (obj) {
                var data = obj.data;
                var event = obj.event;

                if (event === 'add') {
                    add();
                }
            });

            // 行点击事件 重置密码
            table.on('tool', function (obj) {
                var data = obj.data;
                var event = obj.event;
                if (event === 'edit') {
                    edit(data.userId);
                } else if (event === 'reset') {
                    layer.open({
                        content: '/user/' + data.userId + "/reset",
                        title: "重置密码",
                        area: ['500px', '200px'],
                        type: 2,
                        maxmin: true,
                        shadeClose: true,
                        end: function () {
                            table.reload('user-table');
                        }
                    });
                } else if (event === 'del') {
                    del(obj);
                }
            });

            function disableDone(data) {
                parent.layer.msg("禁用成功", {icon: 6});
            }

            function enableDone(data) {
                parent.layer.msg("激活成功", {icon: 6});
            }

            function add() {
                layer.open({
                    content: "/user",
                    title: "新增用户",
                    area: ['40%', '85%'],
                    type: 2,
                    maxmin: true,
                    shadeClose: true,
                    end: function () {
                        table.reload('user-table');
                    }
                });
            }

            function del(obj) {
                layer.confirm("确定删除用户吗?", {icon: 3, title: '提示'},
                    function (index) {//确定回调
                        var id = obj.data.userId;
                        $.post('/user/' + id, {_method: "DELETE"}, function (data) {
                            layer.close(index);
                            handlerResult(data, deleteDone);
                        });
                    }, function (index) {//取消回调
                        layer.close(index);
                    }
                );
            }

            function deleteDone(data) {
                parent.layer.msg("删除成功", {icon: 6});
                table.reload('user-table');
            }

            function edit(id) {
                layer.open({
                    content: '/user/' + id,
                    title: "编辑",
                    area: ['40%', '85%'],
                    type: 2,
                    maxmin: true,
                    shadeClose: true,
                    end: function () {
                        table.reload('user-table');
                    }
                });
            }

            form.on('submit(search)', function (form) {
                table.reload('user-table', {
                    where: form.field
                });
                return false;
            });

        });
    </script>
</body>

</html>